<template>
  <!-- 选择数量弹窗 -->

  <div class="input">
    <button class="subLeft"
            v-on:click.stop="subNumber()"
            :disabled="disabledSub">
      <span>-</span>
    </button>
    <input type="number"
           v-model="buyCount"
           @blur="onBlur"
           @input="inputChange"
           onKeypress="javascript:if(event.keyCode < 48)event.returnValue = false;if(event.keyCode > 57)event.returnValue = false;"
    />
    <button class="addRight"
            v-on:click.stop="addNumber()"
            :disabled="disabledAdd">
      <span>+</span>
    </button>
  </div>

</template>
<script>
export default {
  props: {
    nvalue: {
      type: Number,
      default: 0
    },
    value: {
      type: Boolean,
      default: false
    },
    maxValue: {
      type: [String, Number],
      default: 3
    },
    minValue: {
      type: [String, Number],
      default: 0
    },
    tip: {
      type: String,
      default: ''
    },
    index: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      buyCount: 1,
      minNum: 1,
      maxNum: 1,
      disabledSub: false,
      disabledAdd: false,
      tipIndex: -1
    }
  },
  destroyed () {
    window.removeEventListener('resize', this.resetPosition)
  },
  async mounted () {
    // this.checkNumber()
    window.addEventListener('resize', this.resetPosition)
    this.initData()
  },
  methods: {
    inputChange () {
      this.applyChange()
    },
    initData () {
      this.resetPosition()
      // 设置默认值
      this.buyCount = (this.nvalue || 0) + ''
      if (this.maxValue) {
        this.maxNum = parseInt(this.maxValue)
      }
      if (this.minValue) {
        this.minNum = parseInt(this.minValue)
      }
      this.applyChange()
    },
    onBlur () {
      this.resetPosition()
    },
    resetPosition () {
      this.$nextTick(() => {
        let dialog = this.$refs.editChoose
        if (dialog) {
          // 因为最外层设置了absolute,所以需要设置top,
          dialog.style.top = window.scrollY + 'px'
          dialog.style.height = (window.innerHeight) + 'px'
          this.disabledScroll(true)
        }
      })
    },
    disabledScroll (isBind) {
      const handler = isBind ? 'addEventListener' : 'removeEventListener'
      const dialog = this.$refs.editChoose
      dialog && dialog[handler]('touchmove', this.$_preventDefault, false)
    },
    $_preventDefault (event) {
      event.preventDefault()
    },
    // 设置现在的值，保证不能小于最小值，不能大于最大值
    resetNumber () {
      if (this.buyCount > this.maxNum) {
        this.buyCount = this.maxNum
      }
      if (this.buyCount < this.minNum) {
        this.buyCount = this.minNum
      }
    },
    checkNumber () {
      let isValid = true
      // 现在的值小于规定的最小值
      if (this.buyCount <= this.minNum) {
        // - 禁用
        this.disabledSub = true
        // 小于1个的时候提示
        if (this.buyCount < this.minNum) {
          this.$toast('最少要选1个哦', 'top')
          isValid = false
        }
      } else {
        this.disabledSub = false
      }

      // 现在的值大于规定的最大值
      if (this.buyCount >= this.maxNum) {
        // + 禁用
        this.disabledAdd = true
        // 大于最大值的时候提示
        console.log(this.buyCount, this.maxNum)
        if (this.buyCount > this.maxNum) {
          if (this.tip) {
            this.$toast(this.tip, 'top')
          } else {
            this.$toast('您输入的数量已经超过范围了～', 'top')
          }

          isValid = false
        }
      } else {
        this.disabledAdd = false
      }
      // 当最大值等于最小值的时候，禁用掉加减按钮
      if (this.minNum === this.maxNum) {
        this.disabledAdd = true
        this.disabledSub = true
      }
      // 重新设置值，保证不能小于最小值，大于最大值
      this.resetNumber()
      return isValid
    },
    // 减号的点击事件
    subNumber () {
      this.buyCount--
      this.applyChange()
    },
    // 加号的点击事件
    addNumber () {
      this.buyCount++
      this.applyChange()
    },
    applyChange () {
      this.checkNumber()
      this.$emit('update:nvalue', parseInt(this.buyCount))
      this.$emit('inputChange', this.index)
    },
    gettype: function (...ooo) {
      let typeMap = {
        '[object Null]': 'null',
        '[object Undefined]': 'undefined',
        '[object Number]': 'number',
        '[object String]': 'string',
        '[object Array]': 'array',
        '[object Object]': 'object',
        '[object Boolean]': 'boolean',
        '[object Function]': 'function'
      }
      // 传来的参数不为null
      if (ooo) {
        // 获取原型对象
        let type = Object.prototype.toString
        // 为了兼容之前的代码,如果参数只有一个
        if (ooo.length === 1) {
          return typeMap[type.call(ooo[0])]
        }
        // 参数有多个，拼接数组返回
        let arr = []
        ooo.map(function (key, value) {
          arr.push(typeMap[type.call(key)])
        })
        return arr
      }
      return ooo
    }
  }
}
</script>
<style lang="stylus" scoped>
.input {
  margin-top: 38px;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  border: none;
  border-top: 1px solid RGBA(153, 153, 153, 0.5);
  border-bottom: 1px solid RGBA(153, 153, 153, 0.5);

  .subLeft {
    width: 50px;
    height: 44px;
    border: none;
    border-right: 1px solid RGBA(153, 153, 153, 0.5);
    border-left: 1px solid RGBA(153, 153, 153, 0.5);
    color: RGBA(51, 51, 51, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    align-self: center;
    outline: none;
    font-size: 30px;
    position: relative;
    background: white;

    &:disabled {
      background: rgba(220, 220, 220, 1);
    }

    span {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  input {
    width: 66px;
    outline: none;
    height: 38px;
    font-size: 30px;
    box-shadow: none;
    // border: 1px solid RGBA(220, 220, 220, 1);
    text-align: center;
    border: none;
  }

  .addRight {
    color: RGBA(51, 51, 51, 1);
    width: 50px;
    height: 44px;
    border: none;
    border-left: 1px solid RGBA(153, 153, 153, 0.5);
    border-right: 1px solid RGBA(153, 153, 153, 0.5);
    text-align: center;
    align-self: center;
    outline: none;
    font-size: 30px;
    position: relative;
    background: white;

    &:disabled {
      background: rgba(220, 220, 220, 1);
    }

    span {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>

